<template>
  <WindowTab obj="addFriend">
    <p class="text-xs text-fontPlaceholde px-2">添加好友</p>
  </WindowTab>
  <div class="w-full px-2">
    <div
      class="w-full m-auto px-2 py-4 flex flex-col justify-center items-center"
      style="border-bottom: 1px solid var(--border)"
    >
      <n-input
        v-model:value="searchVal"
        class="rounded-6px text-12px h-[30px"
        placeholder="搜索"
        style="background-color: var(--bg-input); width: 80%"
      >
        <template #prefix>
          <component :is="RenderIcon(SearchOutline)" />
        </template>
      </n-input>
    </div>
    <div class="w-full h-[calc(100vh-100px)] px-2 overflow-hidden">
      <n-tabs :bar-width="28" class="custom-tabs" type="line" v-bind:value="active">
        <n-tab-pane name="user" tab="用户">
          <SearchList :list="searchList" @confirm-join="confirmJoin" />
        </n-tab-pane>
        <n-tab-pane name="group" tab="群聊">
          <SearchList :list="searchList" />
        </n-tab-pane>
      </n-tabs>
    </div>
  </div>
  <el-dialog v-model="showAddDialog" title="添加好友" width="300">
    <div class="content">
      <div class="flex flex-row items-center gap-2">
        <n-avatar :src="currentUser?.avatar" />
        <div>{{ currentUser?.name }}</div>
      </div>
      <div>
        <p class="my-3 text-sm text-placeholder">附加留言：</p>
        <el-input
          v-model="addFriendPayload.msg"
          :rows="3"
          placeholder="请输入添加信息"
          style="width: 100%"
          type="textarea"
        />
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="Cancel">取消</el-button>
        <el-button size="small" type="primary" @click="AddFriendFunc"> 添加 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, toRaw, watch } from "vue";
import { ChatType, MessageType } from "@/types/chat";
import { IAddFriendPayload, ISearchFriendItem } from "@/types/friend";
import { AddFriend, SearchFriend } from "@/api/friend.ts";
import { GenerateStringUUid, RenderIcon } from "@/utils/common.ts";
import { useUser } from "@/store/modules/user";
import { SearchOutline } from "@vicons/ionicons5";
import { NAvatar, NInput, NTabPane, NTabs } from "naive-ui";
import WindowTab from "@/components/WindowTab/index.vue";
import SearchList from "./components/SerchList.vue";
import { MessageStrategyMap } from "@/tactics/message";
import { ElMessage } from "element-plus";

let active = ref("user");
let searchList = ref<ISearchFriendItem[]>([]);
let searchVal = ref<string>("");
let showAddDialog = ref(false);
let timer: null | NodeJS.Timeout = null;

let currentUser = ref<ISearchFriendItem | null>(null);
const user = useUser();
let addFriendPayload = ref<IAddFriendPayload>({
  friendId: 0,
  msg: "",
});

function confirmJoin(item: ISearchFriendItem) {
  showAddDialog.value = true;
  currentUser.value = item;
  addFriendPayload.value.friendId = item.id;
}

// 查找
async function FindUser() {
  let res = await SearchFriend({
    name: searchVal.value,
    userId: user.userId,
  });
  if (!res) return;
  searchList.value = res.data;
}

// 点击取消
function Cancel() {
  showAddDialog.value = false;
  addFriendPayload.value = {
    friendId: 0,
    msg: "",
  };
  currentUser.value = null;
}

// 添加好友
async function AddFriendFunc() {
  const res = await AddFriend(toRaw(addFriendPayload.value));
  if (!res || res.status != 200) return;
  const strategy = MessageStrategyMap[MessageType.requestAdd];
  let message = strategy.buildMessage({
    toId: addFriendPayload.value.friendId,
    chatType: ChatType.friendNotify,
    sessionId: GenerateStringUUid(),
  });
  strategy.sendMessage(message);
  ElMessage.success("添加成功");
  showAddDialog.value = false;
}

watch(
  () => searchVal.value,
  () => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(async () => {
      if (active.value === "user") {
        await FindUser();
      }
    }, 600);
  },
);
</script>

<style lang="scss" scoped></style>
